<template>
  <div id="container">
    <video height="100%" width="100%" src="../assets/yuner.mp4" autoplay loop muted=""></video>
  <div id="login-container">
    <h3>秀DD后台用户登录</h3>
    <el-form ref="loginForm" v-model="form" :model="form" :rules="rules">
      <el-form-item prop="name">
        <el-input type="text" v-model="form.name" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input type="password" v-model="form.pwd" show-password placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="btn" type="primary" round @click="login">登录</el-button>
        <el-button class="btn" type="danger" round @click="reset">重置</el-button>
        <el-button type="text" @click="regist">注册</el-button>
      </el-form-item> 
    </el-form>
  </div>
  </div>
</template>
<script>
export default {
  name: 'Login',
  data () {
    // 定义自定义数据验证
    const checkpwd = function (rule, value, callback) {
      if (/^\w{4,}$/.test(value)) {
        callback()
      } else {
        callback(new Error('密码只能是数字和字母'))
      }
    }
    return {
      form: {
        name: '',
        pwd: ''
      },
      rules: {
        name: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { max: 10, message: '用户名最大长度10位', trigger: 'change' },
          { min: 3, message: '用户名最短长度3位', trigger: 'change' }
        ],
        pwd: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { validator: checkpwd, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login () {
      const vm = this
      // this.$refs.loginForm.validate(function (valid) {
      //   if (valid) {
      //     alert('正在登录')
      //     vm.$http.post('/user/login/',
      //       { username: vm.form.name, password: vm.form.pwd },
      //     ).then(resp => {
      //       console.info(resp.data)
      //     })
      //   }
      // })
      const url = 'http://180.76.121.47:8001/user/login/'
      const axios = require('axios')
      axios.post(url, {
        username: this.form.name,
        password: this.form.pwd
      }).then(resp => {
        const { username, token, msg } = resp.data
        if (msg === '登录成功') {
          vm.$message.success(msg)
          // 将身份信息token写入到axios的请求头
          vm.$http.defaults.headers.common.Authorization = 'Token ' + token

          // 保存用户名
          window.localStorage.setItem('username', username)
          sessionStorage.setItem('token', 'Token ' + token)
          // 跳转至主页
          vm.$router.push('/index')
        }
      })
    },
    regist () {
      this.$router.push('/regist')
    },
    reset () {
      this.$refs.loginForm.resetFields()
    }
  }
}
</script>
<style scoped>
  #login-container{
    width: 300px;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    opacity: 0.8;
    position: absolute;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
  }
  #login-container h3{
    padding: 20px 0;
    margin: 0;
    background-color: deepskyblue;
    border-radius: 10px 10px 0 0;
    opacity: 0.4;
  }
</style>
